<template>
  <div class="receive-info" v-loading="loading">
    <div class="flex-row-start counts">
      <div class="flex-row-center">
        <p class="large-num">{{ result.allNumber }}</p>
        <p>单位总数</p>
      </div>
      <div class="flex-row-center space">
        <p class="large-num">{{ result.sign }}</p>
        已签收
      </div>
      <div class="flex-row-center space">
        <p class="large-num">{{ result.notSigned }}</p>
        未签收
      </div>
    </div>
    <el-table :data="tableData" stripe>
      <el-table-column label="责任部门" prop="unitName" />
      <el-table-column label="责任领导" prop="responsibleLeaderName" />
      <el-table-column label="联系电话" prop="responsibleLeaderPhone" />
      <el-table-column label="责任科室" prop="responsibleDeptName" />
      <el-table-column label="责任人" prop="responsibleUserName" />
      <el-table-column label="联系电话" prop="responsibleUserPhone" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { getUnitReceive } from '@/api/mission/receive'

const { matterId } = defineProps<{
  matterId?: number
}>()

const tableData = computed(() => {
  return result.value.list
})

const loading = ref(false)
const result = ref({
  allNumber: 1,
  list: [],
  notSigned: 0,
  sign: 1,
})

async function getInfo() {
  const { data } = await getUnitReceive(matterId)
  if (data.status === 200) {
    result.value = data.data
  }
}

onMounted(async () => {
  if (matterId) {
    loading.value = true
    await getInfo()
    loading.value = false
  }
})
</script>

<style scoped lang="scss">
.counts {
  margin-bottom: vh(20);
  height: vh(24);
  color: rgba(208, 222, 238, 1);
  line-height: vh(24);
}
.space {
  margin-left: vw(144);
}
.large-num {
  margin-right: vh(6);
  font-size: vw(20);
  font-weight: 700;
  letter-spacing: 0px;
  line-height: vw(24);
  color: #fff;
  font-family: 'DDin';
}
</style>
